<template>
  <div class="md-example-child md-example-child-drop-menu md-example-child-drop-menu-1 page">
        <!-- <div v-for="i in list" :key="i" >
          <p class="scroll-view-item">{{i}}</p>
        </div>-->
        <div v-for="product in productList" class="scroll-view-list" @click="direct(product)">
          <div class="line">
            <!-- content -->
            <a href="#">
              <div class="flex">
                <img
                  :src="product.appLogo"
                  border="0"
                  style="width: 0.9rem; height: 0.9rem; margin-right: 6px;"
                >
                <div class="flex-item">
                  <div style="font-size: 0.3rem; text-align:left;">{{product.appName}}</div>
                  <!-- 副标题 -->
                  <div
                    style="font-size: 0.28rem; color: #B3B3B3; text-align:left">{{product.appDesInfo}}</div>
                  <!-- 描述 -->
                  <div style="font-size: 0.28rem; color: #B3B3B3; text-align:left"  v-html="product.quotaDes">
                  </div>
                </div>
                <!-- 右侧文字 -->
                <div style="font-size: 0.3rem;text-align:right;">
                  <div style="font-size:0.3rem; color: red">{{product.rate}}</div>
                  <div style="font-size: 0.28rem; color: #B3B3B3;">{{product.rateDes}}</div>
                </div>
              </div>
            </a>
          </div>
        </div>
  </div>
</template>

<script>
import {
  DropMenu,
  Field,
  FieldItem,
  InputItem,
  Icon,
  Dialog,
  ScrollView,
  ScrollViewMore,
  Button
} from "mand-mobile";

import axios from "axios";
import { log } from "util";
import { API_BASE } from "@/config";

export default {
  name: "searchWithType",
  components: {
    [DropMenu.name]: DropMenu,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [InputItem.name]: InputItem,
    [Icon.name]: Icon,
    [ScrollView.name]: ScrollView,
    [ScrollViewMore.name]: ScrollViewMore
  },
  methods: {
    buildParam(barItem, listItem) {
      this.param = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        qutaType: null,
        sortType: null
      };
      if (null != barItem) {
        if (barItem.value == 1) {
          this.param.qutaType = listItem.value;
        }
        if (barItem.value == 3) {
          this.param.sortType = listItem.value;
        }
      }
    },
    change(barItem, listItem) {
      this.pageNum = 1;
      this.buildParam(barItem, listItem);
      this.loadProductList(true);
    },
    direct(product){
      var url = `${API_BASE}/market/v1/auth/urlAuth`;
      var getUrl = `${API_BASE}/market:app:method:login`;
      var p = { url: product.recordLinkUrl}
      var result = axios.post(url, p).then(response => {
        console.log(response)
        if(response.data.code != 1){
          console.log(getUrl)
          window.location.href = getUrl;
        }else{
          window.location.href = product.recordLinkUrl;
        }
      });
    },
    loadProductList(resize) {
      var url =
        `${API_BASE}/market/v1/product/getProductListByFixCondition`;
      if (this.param == null) {
        this.param = {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        };
      } else {
        this.param.pageNum = this.pageNum;
      }
      return axios.post(url, this.param).then(response => {
        this.isFinished = response.data.data.isLastPage;
        if (!resize) {
          this.productList = this.productList.concat(response.data.data.list);
        } else {
          this.productList = response.data.data.list;
        }
        this.pageNum++;
        this.$refs.scrollView.reflowScroller();
        this.$refs.scrollView.finishLoadMore();
      });
    },
    $_onEndReached() {
      if (this.isFinished || this.isLoading) {
        return;
      }
      this.isLoading = true;
      this.loadProductList(false).then(() => {
        this.$refs.scrollView.finishLoadMore();
        this.isLoading = false;
      });
    }
  },
  data() {
    return {
      isContentShow: false,
      productList: [],
      data: [
        {
          text: "贷款金额",
          value: "1",
          options: [
            {
              value: 0,
              text: "贷款金额"
            },
            {
              value: 1,
              text: "2000以下"
            },
            {
              value: 2,
              text: "2000-5000"
            },
            {
              value: 3,
              text: "5000-10000"
            },
            {
              value: 4,
              text: "10000-20000"
            },
            {
              value: 5,
              text: "20000以上"
            }
          ]
        },
        //1-综合排序,2-放款快,3-通过率高,4-利息低
        {
          text: "贷款分类",
          value: "3",
          options: [
            {
              value: 0,
              text: "贷款分类"
            },
            {
              value: 2,
              text: "放款快"
            },
            {
              value: 3,
              text: "通过率高"
            },
            {
              value: 4,
              text: "利息低"
            }
          ]
        }
      ],
      pageNum: 1,
      pageSize: 20,
      list: 10,
      isFinished: false,
      isLoading: false,
      param: null
    };
  },
  mounted() {
    this.change(null, null);
  }
};
</script>
<style>
a:link{text-decoration:none;}
a:visited {text-decoration:none ; }
a:hover {text-decoration:none ; }
a:active {text-decoration:none ;}
a{text-decoration : none; color: black} 
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-item {
  flex: 1;
}
.line {
  margin-top: 0.2rem;
  padding: 0.04rem 0.1rem 0.04rem 0.1rem;
  padding-bottom: 10px;
  border-bottom: 1px solid #dddddd;
  padding-bottom: 10px;
}
</style>

<style lang="stylus" scoped>
.md-example-child-scroll-view-2 {
  padding: 82px 20px 0;
}

.md-example-child-field-2 {
  .md-input-item {
    background: #FFF;
    padding: 0 32px;
  }

  .strong-tip {
    font-size: 24px;
    color: color-text-highlight;
  }
}
</style>